Defer Parsing of JavaScript Çözümü
Volkan İnanç “Defer” etiketi ile JavaScript dosyaları sayfada en son açılacaktır ve bu sayede sitenin çalışma hızı artacaktır.JavaScript Ayrıştırmasını Ertelemek
JavaScript kodları sayfa hızı ile ilgili her zaman problem yaratan bir konu olmuştur. Fakat; JavaScript kodunun içine “defer” etiketi konularak bu sorun giderilebilir. “Defer” etiketi ile JavaScript dosyları sayfada en son açılacaktır ve bu sayede sitenin çalışma hızı artacaktır. JavaScript kodlarına “defer” etiketi eklenmesi işleminin genellikle internet sitesinin yapısına göre uygulanması gerekir.
Genel Açıklama
Bir internet sayfasını yüklemek için, tarayıcının sayfanın yüklenme süresine ek süre bindiren, tüm <script> etiketlerinin içeriğini ayrıştırması gerekir. Fakat; elbette, İnternet sayfasının ilk yükleme süresi azaltılabilir. Bunun için internet sayfasını oluşturmak için gereken JavaScript miktarı en aza indirilmelidir. Ayrıca, yürütülmesi gereken zamana kadar, gereksiz olan JavaScript ler ayrıştırılarak ertelenebilir.
Google’dan Detaylar
JavaScript'in ayrıştırılmasını ertelemek için kullanılabilecek çeşitli yöntemler bulunuyor. En basit ve en çok tercih edilen teknik, ihtiyaç duyulana kadar JavaScript yüklemesini erteleme tekniğidir. İkinci bir yöntem olarak, uygun bulunduğunda <script async> niteliğini kullanma yöntemidir. Bu yöntem ile internet sitesinin ilk sayfasının oluşturduğu yükü erteleyerek, tarayıcının UI iş parçacığı başka bir şey yapmakla meşgul olmayana kadar erteleme işlemini engeller. Bu yöntemlerden hiçbiri sizing için uygun değilse, aşağıda açıklanan mobil uygulamalarda yaygın olarak kullanılan bazı ek yöntemleri denemeniz tavsiye edilir.
Mobil uygulama oluştururken, uygulama için ihtiyaç olacak tüm JavaScript'i daha önceden yüklemek gerekir, Bu sayede, uygulama kullanıcısı çevrimdışı olduğu zaman uygulama çalışmaya devam eder. Bu tür durumlarda, mobil Gmail gibi bazı applikasyonlar yorumlara JavaScript'i yüklemeyi ve daha sonra gerek duyulduğunda JavaScript'i değerlendirmeyi (eval()) yararlı buluyorlar. Bu yaklaşım biçimi, tüm JavaScript’lerin ilk sayfanın yüklenmesi esnasında yüklenmesini sağlar, fakat; JavaScript’in ayrıştırılmasını gerektirmez.
JavaScript dizgesindeki değişmezlere kod depolamak, yorumlarda kod depolamanın başka bir alternatif yoludur. Bu yöntemi kullanırken, JavaScript yalnızca gerektiği taktirde, yine de hazır bilgi dizgesinde eval () çağrılarak ayrıştırılır. Bu yöntem ile aynı zamanda uygulamanın JavaScript'i erken yüklemesine imkan sağlar, fakat gereken zamana kadar ayrıştırmayı erteler.
Tarayıcı, sayfa JavaScript’i ayrıştırma işlemine kadar meşgul bir gösterge göstermeye devam edeceği için, <script> etiketlerinin sayfa sonuna taşıma işleminin en düşük seviyede olduğuna dikkat etmelisiniz. Uygulama kullanıcıları, sayfa yükleme göstergesinin sayfa ile etkileşime geçmeden hemen önce sayfa yükleme işleminin tamamlandığını göstermesini isteyebilir. Bu sebeple, tarayıcının sayfa yükleme işleminin tamamlandığını göstermesi için geçen süreyi en azami seviyeye indirecek biçimde JavaScript'i yüklemesi oldukça önemlidir.
2011 yılının başlarında yapılan testlerde, modern mobil cihazlarda, her bir JavaScript kilobaytının JavaScript'in toplam sayfa yükleme süresine yaklaşık olarak 1ms ayrıştırma süresi eklediği görüldü. Bundan dolayı, ilk sayfa yüklemesinin kapsadığı 100kB JavaScript, uygulama kullanıcıları için 100ms ek yükleme süresi oluşturur. Bir sayfaya yapılan her ziyaret için JavaScript'in ayrıştırılması gerektiği için, eklenen bu ekstra yükleme süresi, ağdan yüklendiği zaman, tarayıcı önbelleği aracılığı ile ya da HTML5 çevrimdışı modunda, her bir sayfa yüklenmesinin bir parçası olacaktır.
